import { View, Image } from '@ray-js/ray';
import { Cell as OrginCell, SmartCellProps, Icon } from '@ray-js/smart-ui';
import React from 'react';
import clsx from 'clsx';
import styles from './index.module.less';

export const Cell: React.FC<SmartCellProps & {
  needMargin?: boolean;
  iconClass?: any;
  top?: number;
}> = ({ icon, needMargin = false, iconClass, top = 2, ...rest }) => {
  let slot;
  if (icon) {
    slot = {
      icon: (
        <Image
          src={icon}
          className={clsx(styles.icon, iconClass)}
          style={{
            top: needMargin ? `${top}rpx` : '0rpx',
          }}
        />
      ),
    };
  }

  return <OrginCell {...rest} slot={slot} />;
};
